<template>
   <el-row class="wapper">
       <h3>草稿箱（{{$store.state.draft.draftList.length}}）</h3>
       <el-row class="draft-item" 
       v-for="(item,index) in $store.state.draft.draftList"
       :key="index"
       >
          <el-row class="title">
            <span @click="editDraft(item.id,item.date)">{{item.title}}</span>
          </el-row>
          <el-row class="other" type="flex" justify="space-between">
              <el-row class="date">{{item.date}}</el-row>
              <el-row>
                  <i class="el-icon-edit" @click="editDraft(item.id,item.date)"></i>
                  <i class="el-icon-delete" @click="delDraft(item.id)"></i>
              </el-row>
          </el-row>
       </el-row>
   </el-row>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        editDraft(id,date){
            // 子传父
            this.$emit('editDraft',id,date);
        },
        delDraft(id){
           this.$store.commit('draft/delDraftInfo',id);
        }
    }
}
</script>

<style lang="less" scoped>
.wapper{
    box-sizing: border-box;
    width: 225px;
    padding:12px 8px; 
    border:1px solid #DDDDDD;
    h3{
       font-weight: 400;
       font-size: 16px;
       color: #666666;
    }
    .draft-item{
        margin:16px 0;
        .title{
            width:100%;
            height:40px;
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            span{
                &:hover{
                    color: #FFA000;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
        }
        .other{
            font-size: 14px;
            .date{
                color: #999999;
            }
            i{
                color: #000;
                cursor: pointer;
            }
        } 
    }
}
</style>